import React, { useImperativeHandle, forwardRef, memo, lazy, useRef, Suspense } from 'react'
import './index.scss'
const MenuBox = lazy(() => import('./Menu'))
const LdMainContainer = memo(forwardRef((props: any, ref: any) => {
    const { defaultKey = '', noSides = false, showMenu = true, background = '#fff', menus = [], change } = props
    const slotChildren = React.Children.toArray(props?.children)
    return (
        <>
            <Suspense>
                <div className="ld-main-container flex-start" style={{ background: background }}>
                    {showMenu ? <MenuBox defaultKey={defaultKey} menus={menus} change={change}
                    ></MenuBox> : null}
                    <div className={`main-content ${noSides ? 'edit-content' : ''}`}>
                        {slotChildren.length ? slotChildren.map((item: any, index: number) => {
                            return (
                                <div key={index} style={{ width: '100%', height: '100%' }}>
                                    {item}
                                </div>
                            )
                        }) : null}
                    </div>
                </div>
            </Suspense>
        </>
    )
}))
export default LdMainContainer